'use client';

import Autoplay from 'embla-carousel-autoplay';
import Link from 'next/link';
import QueryImage from '../common/query-image';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '../ui/carousel';

export default function ShopImageCarousel({
  shops,
}: {
  shops: { id: number; imageKeys: string[] }[];
}) {
  const shopsWithImage = shops.filter((shop) => shop.imageKeys.length);
  return (
    <Carousel
      className="w-full"
      opts={{ loop: true }}
      plugins={[Autoplay({ delay: 3000 })]}
    >
      <CarouselContent className="h-[190px]">
        {shopsWithImage.map((shop) => (
          <CarouselItem key={shop.id}>
            <Link href={`/detail-shop/${shop.id}`}>
              <div className="p-1 w-full h-full flex items-center justify-center cursor-pointer">
                <QueryImage
                  imageKey={shop.imageKeys[0]}
                  wrapperClassName="w-full h-full"
                  imgClassName="w-full h-full object-cover"
                />
              </div>
            </Link>
          </CarouselItem>
        ))}
      </CarouselContent>
      <CarouselPrevious />
      <CarouselNext />
    </Carousel>
  );
}
